<template>
<view class="container">
    <view class="qrcode">
        <view class="qrimg">
			<view class="padding-lg margin-top" style="background-image: url(/static/images/qrimg_bg.png);background-size: 100% 100%;">
				<view class="qr_tit margin-top">你的邀请码</view>
				<view class="qr_uno" @click="copy(uno)">{{ uno }}</view>	
				<tki-qrcode
					ref="qrcode"
					cid="cid"
					:val="qrc.val"
					:size="qrc.size"
					:unit="qrc.unit"
					:background="qrc.background"
					:foreground="qrc.foreground"
					:pdground="qrc.pdground"
					:icon="qrc.icon"
					:iconSize="qrc.iconsize"
					:lv="qrc.lv" 
					:onval="qrc.onval"
					:loadMake="qrc.loadMake"
					:usingComponents="!0"
					@result="qrR" />
				<view class="qr_tips text-gray text-sm margin-tb-sm">长按图片或截屏保存</view>
				<view class="padding-lg">
					<view class="submit_btn">
						<button class="cu-btn" @click="copy(qrc.val)">复制邀请链接发送给好友</button>
					</view>
				</view>
			</view>
        </view>
        <view class="cu-tips">
            <view class="padding-top-sm">1、长按图片保存或截屏保存，朋友扫二维码注册加入</view>
            <view class="padding-top-sm">2、朋友注册时输入你的邀请码</view>
            <view class="padding-top-sm">3、复制邀请链接，发送给好友</view>
        </view>
    </view>
</view>
</template>

<script>
	import h5Copy from "@/common/h5-copy.js"
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				loading: !1,
				loaded: !1,
				source: 0,
				//bgimage: "/static/images/main-bg.png",
				qrc: {
					ifShow: !0,
					val: "请稍候...",
					size: 320,
					unit: "upx",
					background: "#FFFFFF",
					foreground: "#000000",
					pdground: "#000000",
					icon: "/static/qr_logo.png",
					iconsize: 40,
					lv: 3,
					onval: !1,
					loadMake: !1,
					src: ""
				},
				uno: '00000',
				imgbase64val: ""
			}
		},
		onLoad: function(e) {
            this.loadData()
		},
		methods: {
			loadData: function() {
				if (this.loading) return ! 1;
				this.loading = !0;
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"registerQcode",
					timestamp:timestamp,
					data:{token:info.token},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.qrc.val = res.data.data.invite_url;
					this.uno = res.data.data.invite_code;
					this.loading = !1;
					this.loaded = !0;
					setTimeout(()=>{
						this.$refs.qrcode._makeCode();
					},1000)
				})
			},
			qrR: function(e) {
				this.qrc.src = e;
				arguments[0] = e = this.$handleEvent(t);
				this.qrR.apply(void 0, arguments);
			},
			copy: function(val) {
				// #ifndef H5
				uni.setClipboardData({
					data: val
				});
				// #endif
				// #ifdef H5
				const result = h5Copy(val)
				if (result === false) {
					uni.showToast({
						title:'不支持',
					})
				} else {
					uni.showToast({
						title:'复制成功',
						icon:'none'
					})
				}
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	page {
		color: #56595d;
		background-color: #ddeafd;
	}
	.qrcode {
		background-size: 750upx auto;
		background-repeat: no-repeat
	}
	.qrcode .qr_tit {
		font-size: 32upx;
		font-weight: 700
	}
	.qrcode .qr_uno {
		font-size: 42upx;
		font-weight: 700;
		color: #e54d42;
		margin: 30upx 0
	}
	.qrcode .qr_uno uni-text {
		background-color: rgba(0, 0, 0, .08);
		margin-left: 6upx;
		padding: 6upx 10upx;
		border-radius: 6upx
	}
	.qrcode .qrimg {
		display: block;
		width: 90%;
		text-align: center;
		padding-top: 150upx;
		margin: 0 auto;
	}
	.qrcode .cu-tips {
		padding-left: 50upx;
		padding-right: 50upx;
		color: #fff;
		padding-bottom: 150upx;
	}
</style>